import React from "react"
import {View, StatusBar, StyleSheet, Platform} from "react-native"

// 获取状态栏高度
export const STATUSBAR_HEIGHT =
  Platform.OS === "ios" ? 44 : StatusBar.currentHeight || 0

interface ImmersiveContainerProps {
  children: React.ReactNode
  statusBarColor?: string
  statusBarStyle?: "default" | "light-content" | "dark-content"
  backgroundColor?: string
}

/**
 * 沉浸式容器组件
 * 用于在整个应用中提供一致的沉浸式效果
 */
const StatusBarContainer: React.FC<ImmersiveContainerProps> = ({
  children,
  statusBarColor = "transparent",
  statusBarStyle = "light-content",
  backgroundColor = "#f5f5f5",
}) => {
  return (
    <View style={[styles.container, {backgroundColor}]}>
      <StatusBar
        translucent
        backgroundColor={statusBarColor}
        barStyle={statusBarStyle}
      />
      {children}
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
})

export default StatusBarContainer
